<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <div style="width:100%;">
              <div class="operation-list">
                  <div style="float:right;margin-right:5px">
                      <el-button icon="el-icon-search" type="primary" @click="btnQuery" v-has="'PINQUERY'" :disabled="changeflag">查询</el-button>
                      <el-button icon="el-icon-document" @click="SaveRecord" v-has="'PMODIFY'" :disabled="!changeflag">保存</el-button>
                      <el-button icon="el-icon-close" @click="Cancel" v-has="'PMODIFY'" :disabled="!changeflag">取消</el-button>
                      <el-button icon="el-icon-plus" @click="SoundSetting" v-has="'PADD'">自定义提示音</el-button>
                  </div>
              </div>
          </div>
      </div>
      <div class="pagecenter">
          <rm-layout-right :fixsize=520 :splitwidth=5 :minfixsize=200 :maxflxsize=2000>
              <div ref="xTableDiv" style="height:100%">
                  <vxe-table :data.sync="tableData" :loading="loadingmain" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row class="mytable-style" highlight-hover-column highlight-hover-row how-header-overflow ref="xTable" resizable show-overflow size="mini" stripe show-header-overflow :optimization="{ animat: false }" header-align="center" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" @current-change="currentChangeEvent">
                      <vxe-table-column type="index" title="NO." width="40" align="center"></vxe-table-column>
                      <vxe-table-column field="msgtypename" sortable title="消息类型" width="240" show-overflow></vxe-table-column>
                      <vxe-table-column field="cacherefreshtime" sortable title="消息刷新间隔(分)" width="110" show-overflow align="center"></vxe-table-column>
                      <vxe-table-column field="prealerttime" sortable title="提前提醒时间(分)" width="120" show-overflow align="center"></vxe-table-column>
                      <vxe-table-column field="msgcolor" sortable title="消息提醒文本颜色" width="120" show-overflow align="center">
                          <template v-slot="{ row }">
                              <div v-bind:style="{ background: row.msgcolor }" style="color: transparent">{{ row.msgcolor }}</div>
                          </template>
                      </vxe-table-column>
                      <vxe-table-column field="onsound" sortable title="是否开启声音" width="120" show-overflow align="center">
                          <template v-slot="{ row }">
                              <el-checkbox v-model="row.onsound" true-label="1" false-label="0" disabled></el-checkbox>
                          </template>
                      </vxe-table-column>
                      <vxe-table-column field="soundname" sortable title="声音源" width="140" show-overflow align="center"></vxe-table-column>
                      <vxe-table-column field="soundtime" sortable title="声音持续时间(秒)" width="120" show-overflow align="center"></vxe-table-column>
                  </vxe-table>
              </div>
              <template v-slot:fix>
                  <div style="width:100%;float:left;height:100%;border:1px solid #ccc;overflow:auto;">
                      <div>
                          <table class="edit" style="padding:5px;border-collapse:separate; border-spacing:3px 4px;">
                              <tr>
                                  <td>消息类型</td>
                                  <td colspan="2">
                                      <el-input v-model="rightData.msgtypename" style="width:250px;" :disabled="true"></el-input>
                                  </td>
                              </tr>
                              <tr>
                                  <td>消息刷新间隔(分)</td>
                                  <td colspan="2">
                                      <el-input v-model="rightData.cacherefreshtime" @change="hasChange()"></el-input>
                                  </td>
                              </tr>
                              <tr>
                                  <td>提前提醒时间(分)</td>
                                  <td colspan="2">
                                      <el-input v-model="rightData.prealerttime" @change="hasChange()" :disabled="rightData.msgtype != 5 &&rightData.msgtype != 6"></el-input>
                                  </td>
                              </tr>
                              <tr>
                                  <td>消息提醒文本颜色</td>
                                  <td colspan="2">
                                      <el-color-picker v-model="rightData.msgcolor" size="mini" @change="hasChange()"> </el-color-picker>
                                  </td>
                              </tr>
                              <tr>
                                  <td>是否开启提示音</td>
                                  <td colspan="2">
                                      <el-checkbox v-model="rightData.onsound" true-label="1" false-label="0" @change="hasChange()"></el-checkbox>
                                  </td>
                              </tr>
                              <tr>
                                  <td>提示音</td>
                                  <td>
                                      <el-select v-model="rightData.soundname" style="width:200px;" clearable placeholder="请选择音频文件" @change="soundChange">
                                          <el-option v-for="(item,index)  in soundOption" :key="index" :label="item" :value="item"></el-option>
                                      </el-select>
                                  </td>
                                  <td>
                                      <el-button type="primary" @click="SoundPlay()">试听</el-button>
                                  </td>
                              </tr>
                              <tr>
                                  <td>提示音持续时间(秒)</td>
                                  <td colspan="2">
                                      <el-input v-model="rightData.soundtime" @change="hasChange()"></el-input>
                                  </td>
                              </tr>
                          </table>
                      </div>
                  </div>
              </template>
          </rm-layout-right>
      </div>
      <el-dialog title="提示音播放" v-el-drag-dialog :close-on-click-modal="false" :visible.sync="soundPlayVisible" width="320px" @close="SoundClose()">
          <audio ref="wavaudio" :src="wavUrl" controls autoplay loop></audio>
      </el-dialog>
      <el-dialog title="自定义提示音" v-el-drag-dialog :close-on-click-modal="false" :visible.sync="soundVisible" width="320px">
          <div style="padding:10px">
              <div style="margin-bottom: 10px;">
                  <el-button type="primary" @click="ReplaceSound">更换提示音</el-button>
              </div>
              <div style="height:150px;">
                  <vxe-table :data.sync="soundData" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row class="mytable-style" highlight-hover-column highlight-hover-row how-header-overflow ref="xTable2" resizable show-overflow size="mini" stripe show-header-overflow :optimization="{ animat: false }" header-align="center" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig">
                      <vxe-table-column type="index" title="NO." width="40" align="center"></vxe-table-column>
                      <vxe-table-column field="name" title="提示音" width="200" align="center" header-align="center"></vxe-table-column>
                  </vxe-table>
              </div>
              <div style="float:right;margin:10px">
                  <el-button type="primary" @click="btnExit">退出</el-button>
              </div>
          </div>
      </el-dialog>
      <el-dialog title="更换提示音" v-el-drag-dialog :close-on-click-modal="false" :visible.sync="soundAddVisible" width="320px">
          <div style="padding:20px">
              <span>{{ cursound.name }}</span>
              <el-upload :action="url" :limit="1" accept=".wav" :on-change="handleFileChange" :http-request="uploadOpt" :file-list="fileList">
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
          </div>
      </el-dialog>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
import axios from "axios";
export default {
  name: "LIS165",
  data() {
      return {
          changeflag: false,
          loadingmain: false,
          tableData: [],
          keyConfig: {
              isEdit: true,
          },
          keyLocalConfig: {
              isArrow: true,
              isDel: true,
              isTab: true,
          },
          selrow: {},
          rightData: {},
          soundOption: [ 'alert.wav', 'alert1.wav', 'alert2.wav', 'alert3.wav', 'alert4.wav' ],
          soundVisible: false,
          soundPlayVisible: false,
          soundAddVisible: false,
          wavUrl: require("@/assets/vedio/alert.wav"),
          url: "",
          form: {},
          fileList: [],
          cursound: {},
          soundData: [],
      };
  },
  created() {
      this.initPage();
  },
  computed: {
  },
  mounted() {},
  updated() {},
  methods: {
      initPage() {
          this.loadingmain = true;
          this.$tool
              .request({
                  url: "LIS/LIS1/LIS165",
                  method: "post",
                  data: {
                      action: "initPage",
                  },
              })
              .then((res) => {
                  this.loadingmain = false;
                  if (res.data.length > 0) {
                      this.tableData = res.data; //主表赋值
                      this.selrow = res.data[0];
                      this.$refs.xTable.setCurrentRow(this.selrow);
                      this.currentChangeEvent({ row: this.selrow });
                  } else {
                      this.tableData = [];
                  }
              })
              .catch((e) => {
                  this.$alert(e, "出错");
              });
      },
      btnQuery() {
          this.initPage();
      },
      hasChange() {
          this.changeflag = true;
      },
      SaveRecord() {
          this.$tool
              .request({
                  url: "LIS/LIS1/LIS165",
                  method: "post",
                  data: {
                      action: "save",
                      urec: this.rightData,
                  },
              })
              .then((res) => {
                  if (res.flag == 1) {
                      this.changeflag = false;
                      this.$message.success("保存成功！");
                      this.initPage();
                  } else {
                      this.$message.error("保存失败！");
                  }
              })
              .catch((e) => {
                  this.$alert(e, "出错");
              });
      },
      Cancel() {
          this.rightData = XEUtils.clone(this.selrow, true);
          this.changeflag = false;
      },
      ReplaceSound() {
          this.fileList = [];
          this.soundAddVisible = true;
          this.cursound = this.$refs.xTable2.getCurrentRow();
          console.log(this.cursound.name);
      },
      btnExit() {
          this.soundVisible = false;
      },
      SoundSetting() {
          console.log(this.soundOption);
          this.soundVisible = true;
          this.soundOption.forEach((item) => {
              this.soundData.push({ name: item });
           });
          setTimeout(() => { this.$refs.xTable2.setCurrentRow(this.soundData[0]); },50);
      },
      // 上传发生变化钩子
      handleFileChange(file, fileList) {
          this.form.file = file.raw;
      },
      uploadOpt(content) {
          let formData = new FormData();
          formData.append("action", "LIS165");
          formData.append("file", content.file);
          formData.append("noderequirename", require("@/assets/vedio/" + this.cursound.name));
          var URL = this.$tool.baseUrl.replace("api", "z") + "fileupload";
          axios
              .post(URL, formData, { "Content-Type": "multipart/form-data" })
              .then((res) => {
                  let response = res.data;
                  if (response.flag == "1") {
                      this.soundAddVisible = false;
                      this.$notify.success({
                          title: "成功",
                          message: `音频更换成功`,
                      });
                  } else {
                      this.$notify.error({
                          title: "错误",
                          message: response.msg,
                      });
                  }
              })
              .catch((e) => {
                  this.$alert(e, "出错");
              });
      },
      currentChangeEvent({ row }) {
          this.rightData = XEUtils.clone(row, true);
      },
      soundChange(val) {
          if(val) {
              this.rightData.soundname = val;
          } else {
              this.rightData.soundcode = "";
              this.rightData.soundname = "";
          }
          this.hasChange();
      },
      SoundPlay() {
          if(this.rightData.soundname) {
              this.soundPlayVisible = true;
              this.wavUrl = require("@/assets/vedio/" + this.rightData.soundname);
          } else {
              this.$alert("请选择一种提示音！");
          }
      },
      SoundClose() {
          this.$refs.wavaudio.pause();
      },
  },
};
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  overflow-x: auto;
  word-wrap: none;
  z-index: 99;
}
.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: hidden;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 655px;
  overflow: hidden;
}

.middle-right {
  position: absolute;
  height: 100%;
  width: 650px;
  right: 0px;
}
.middle-right-mask {
  position: absolute;
  height: 100%;
  width: 650px;
  right: 0px;
  background: #ffffff;
  opacity: 0.5;
  z-index: 999;
}

.formtablestyle {
  height: 100%;
  font-size: 12px;
  color: #333;
  width: 100%;
}
.formtablestyle tr td:nth-child(1),
td:nth-child(3),
td:nth-child(5) {
  text-align: right;
}
.popTableStyle tr td:nth-child(1),
td:nth-child(3),
td:nth-child(5),
td:nth-child(7) {
  text-align: right;
}
::v-deep .middle-right .formtablestyle tr td div .el-input__inner {
  /*border: 1px solid #ffffff !important;
   padding: 0px !important;*/
  color: #000000;
}
::v-deep .el-color-picker--small .el-color-picker__trigger {
  width: 100% !important;
  height: 24px !important;
  padding: 0px;
}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #000000;
}
::v-deep  .mytable-style.vxe-table .vxe-body--column.col-orange {
  background-color: #f8f8f8;
}
::v-deep  .middle-center .vxe-table .vxe-cell {
  padding: 0px;
}
::v-deep  .xTable1Class .vxe-table .vxe-cell {
  padding: 0px;
}
::v-deep  .middle-center tr.vxe-body--row.row-new {
  color: #cc6600;
}
::v-deep  .middle-center tr.vxe-body--row.row-modify {
  color: blue !important;
}
::v-deep  .middle-right .el-radio {
  margin-right: 5px;
}
::v-deep  .el-button.is-disabled {
  border: 0px;
  color: grey;
  background-color: #e6e6e6;
  font-weight: normal;
}
::v-deep  .note-text .el-textarea__inner {
  padding: 5px !important;
}
::v-deep  .btnclass {
  background-color: #e6e6e6;
  color: black;
}
::v-deep  .middle-center tr.vxe-body--row.row-new {
  color: #cc6600;
}
::v-deep  .middle-center tr.vxe-body--row.row-modify {
  color: blue !important;
}

</style>
